<script setup>
import { reactive, ref } from 'vue'
import FanDropdownMenu from '..'
import DropdownItem from '../../dropdown-item/dropdown-item.vue'
import Input from '../../input/input.vue'
import Button from '../../button/button.vue'

const categoryOpts = [
  { title: '全部', value: 0 },
  { title: '美食', value: 1 },
  { title: '美发', value: 2 },
  { title: '美发3', value: 3 },
  { title: '美发4', value: 4 },
  { title: '美发5', value: 5 },
  { title: '美发6', value: 6 }
]
const regionOpts = [
  {
    text: '附近',
    value: 0,
    children: [
      { text: '附近', value: 0 },
      { text: '100m', value: 100 },
      { text: '500m', value: 500 },
      { text: '2km', value: 2000 }
    ]
  },
  {
    text: '上城区',
    value: 1,
    children: [
      { text: '全部上城区', value: 1.1 },
      { text: '吴山广场', value: 1.2 },
      { text: '城站', value: 1.3 },
      { text: '万象城', value: 1.4 }
    ]
  }
]

const state = reactive({
  category: {
    title: '全部',
    value: 0
  },
  region: {
    title: '附近',
    value: 0
  },
  filterInput: ''
})
const refFilter = ref(null)

const onToggle = (val) => {
  console.log(val)
}
</script>

<template>
  <demo-block title="基础用法" style="padding: 100px 0 0">
    <FanDropdownMenu :z-index="90" @toggle="onToggle">
      <DropdownItem title="固定" :icon="false"></DropdownItem>
      <DropdownItem v-model:title="state.category.title" v-model="state.category.value" :options="categoryOpts"
        title-prop="title" />
      <DropdownItem v-model:title="state.region.title" v-model="state.region.value" :options="regionOpts" />
    </FanDropdownMenu>
  </demo-block>

  <demo-block title="顶部距离+选项高度固定可滚动">
    <FanDropdownMenu :offset="0">
      <DropdownItem v-model:title="state.category.title" v-model="state.category.value" scroll scroll-height="20vh"
        :options="categoryOpts" title-prop="title" />
      <DropdownItem v-model:title="state.region.title" v-model="state.region.value" scroll scroll-height="20vh"
        :options="regionOpts" />
    </FanDropdownMenu>
  </demo-block>

  <demo-block title="自定义">
    <FanDropdownMenu key="qqq" :z-index="70">
      <DropdownItem v-model:title="state.category.title" v-model="state.category.value"
        :options="categoryOpts.slice(0, 2)" title-prop="title" value-prop="value"
        content-style="border-radius:0 0 10px 10px;" />
      <DropdownItem ref="refFilter" title="筛选" :active="!!state.filterInput" icon="filter" icon-size="14px"
        content-style="padding:12px;border-radius:0 0 10px 10px;">
        <div class="fan-flex fan-align-center">
          <Input v-model="state.filterInput" placeholder="一个输入框" border />
        </div>
        <Button block margin="12px 0 0" round @click="refFilter.toggle()">一个按钮</Button>
      </DropdownItem>
    </FanDropdownMenu>
  </demo-block>
</template>
